<template>
	<div class="phonelogin-container">
		<!-- 导航部分 -->
		<LoginHeader>
			<div class="login-nav-center">
            </div>
		</LoginHeader>
		<!-- logo -->
		<div class="login-logo">
			<img src="../../assets/logo.png">
		</div>
		<!-- form表单 @submit="onSubmit"-->
		<van-form class="form" show-error-message>
			<van-cell-group inset>
				<van-field v-model="phone" name="手机号" placeholder="请输入手机号" :rules="[
					{ required: true, message: '请输入手机号' },
					{ validator, message: '手机号不正确' }
				]" class="form-item" />
				<van-field v-model="password" center clearable placeholder="请输入密码" class="form-item"
					:rules="[{ required: true, message: '请输入密码' }]">
				</van-field>
				<div class="form-prompt">
					<span class="from-prompt-left">遇到问题?</span>
					<span class="from-prompt-right">使用密码验证登录</span>
				</div>
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button type="danger" block @click="toLogin">登录</van-button>
			</div>
			<!-- /复选框 -->
			<van-field name="checkbox" class="ischecked">
				<template #input>
					<van-checkbox v-model="isChecked" shape="square" />
					<span>同意</span>
					<span class="color">《服务条款》</span>
					<span>和</span>
					<span class="color">《网易严选服务协议》</span>
				</template>
			</van-field>
		</van-form>
		<div class="other">其他方式登录></div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useUserStore from '@/stores/user';
import { showFailToast, showSuccessToast } from 'vant';
import router from '@/router';
import {useRoute} from 'vue-router'


const userStore = useUserStore()
const route = useRoute()
//手机号校验
const validator = (val: string) => /^1[3-9][0-9]{9}$/.test(val);
//定义响应式数据
const phone = ref('18617715158');
const password = ref('111111');
const isChecked = ref(true)

//登录回调
async function toLogin() {
	//校验
	if (!(phone.value && password.value)) {
		alert('手机号或验证码没有输入');
		return
	}
	//组装数据
	//发送请求
	if(isChecked.value){
		try {
		await userStore.login({
			phone:phone.value,
			password:password.value
		})
    showSuccessToast('登录成功')
		if(route.query.redirect){
			router.push(route.query.redirect as string)
		}else {
			router.push('/')
		}
	} catch (error) {
		showFailToast('登录失败')
		console.log(error);
	}
	}else{
		alert('必须同意用户协议')
	}
}



</script>

<style scoped lang="less">
.phonelogin-container {
	background: #fff;
	min-height: 667px;

	// <!-- 导航部分 -->
	.login-nav-center {
            width: 86px;
            height: 27px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 15px auto;
            font-size: 20px;
            font-weight: bold;
            background: url('../../assets/icon.png') -78px -211px;
            background-size: 235px;
            // background-position: 399 0 126 0;
        }
	//logo
	.login-logo {
		width: 100%;
		height: 45px;
		text-align: center;
		padding-top: 28px;

		img {
			width: 134px;
			height: 45px;
		}
	}

	//form表单
	.form {
		// width: 100%;
		height: 321px;
		margin: 20px;

		//表格
		.form-item {
			border-bottom: 1px solid #ddd;
			position: relative;
		}

		//密码登录//遇到问题
		.form-prompt {
			font-size: 14px;
			padding: 15px;
			margin-bottom: 10px;

			.from-prompt-left {
				float: left;
				color: #ccc;
			}

			.from-prompt-right {
				float: right;
			}
		}

		//复选框
		.ischecked {
			padding-top: 0;

			span {
				margin-right: 2px;
			}

			.color {
				color: #286aee;
			}
		}
	}

	//其他方式登录
	.other {
		font-size: 14px;
		width: 100%;
		text-align: center;
	}
}
</style>